<!-- 评论管理页面 -->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">评论管理</span>
  </div>

  <!-- 评论查询卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名字" style="width:220px;"
                  v-model="searchCommentForm.username" @keydown.enter="loadComment"></el-input>
      </el-form-item>
      <el-form-item label="评论内容" style="width:290px;">
        <el-input placeholder="请输入评论内容" style="width:220px;"
                  v-model="searchCommentForm.content" @keydown.enter="loadComment"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadComment">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 评论内容表格 -->
  <el-card style="margin:20px;">
    <el-table :data="commentArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="userId" label="用户id" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="content" label="评论内容" align="center"></el-table-column>
      <el-table-column prop="createTime" label="评论时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link
                     @click="deleteComment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-card>

</template>


<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";



//定义数组保存评论列表
const commentArr = ref([]);
//定义对象保存查询条件 用户名 评论内容
const searchCommentForm = ref({
  username:'',
  content:''
});
//定义方法显示评论
const loadComment = ()=>{
  let data = qs.stringify(searchCommentForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/comment/select?'+data).then((response)=>{
    //后端返回的状态码
    if(response.data.code==2000){
      //把成功请求回来的数据装到与表格绑定的数组中
      commentArr.value = response.data.data;
      console.log(response.data.data)
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
// 重置查询表单
const resetSearch=()=>{
  searchCommentForm.value.username='';
  searchCommentForm.value.content='';
  loadComment();
};
//进到页面立即加载所有的评论数据
onMounted(()=>{
  loadComment();
})

//删除评论
const deleteComment = (commentId)=>{
  if(confirm('您确认要删除该评论吗?')) {
    axios.post(BASE_URL + '/v1/comment/delete/' + commentId).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success("删除成功");
        loadComment();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

</script>


<style scoped>

</style>